<!--
 * @Author: Freude Xu
 * @Date: 2021-10-05 16:09:47
 * @LastEditors: Freude Xu
 * @LastEditTime: 2021-10-05 16:29:58
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建元素的方法</title>
</head>

<body>
    <button class="inner">点击</button>
    <p>abc</p>
    <script>
        //三种方式创建元素
        //1.document.write()
        //document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则会导致页面的全部重绘
        //页面加载完毕后，点击完之后重新生成页面，原来的内容就没有了
        // var btn = document.querySelector('button');
        // btn.onclick = function() {
        //         document.write('<div>123</div>');
        //     }

        //2.innerHTML
        //innerHTML是将内容写入某个DOM节点，不会导致页面的全部重绘
        //创建多个元素效率更高（前提是不要采取拼接字符串的形式，采取数组形式拼接），结构稍微复杂
        var inner = document.querySelector('.inner');
        inner.innerHTML = '<a href="#">百度</a>';

        //3.document.createElement()
        //创建多个元素效率稍微低一点，但是结构更清晰 
        var create = document.querySelector('.create');
        var a = document.createElement('a');
        create.appendChild(a);
    </script>
</body>

</html>